إضافة اللون إلى موقع الويب الخاص بك باستخدام HTML هو في الواقع بسيط حقا ستساعدك هذه التدوينه القصيرة وسهلة المتابعة على البدء باستخدام الأنماط المضمنة لتلوين النص والروابط والخلفيات في HTML
لون نص HTML
من السهل إضافة لون إلى نص HTML الخاص بك! في هذا المقال ، سنغطي كيفية تغيير لون نص HTML باستخدام عده طرق و اساليب منها
:-
أكواد الألوان Hex
أسماء الألوان HTML
قيم RGB
قيم HSL
أكواد الألوان Hex
هى الطريقة الأكثر شيوعًا لتلوين نص HTML هي باستخدام أكواد اللون السداسية عشرية ( كود سداسي عشرية للاختصار ). ما عليك سوى إضافة سمة نمط إلى عنصر النص الذي تريد تلوينه - كما في المثال التالى - واستخدم خاصية اللون مع كود Hex
<p style="color:#FF0000";>نص باللون الاحمر </p>
نظرية أكواد لغة HTML
اذا نظرت الى هذا الكود FF0000# وهو يمثل اللون الاحمر . . .
قد نتساءل "هل هذا المزيج الغريب من الحروف والأرقام له أي معنى " حسنا الجواب هو "نعم" ،
تنسيق أكواد HTML:
تحتوي كل شفرة HTML على رمز "#" و 6 أحرف أو أرقام. هذه الأرقام في نظام الأرقام الست عشرية. على سبيل المثال ، يمثل "FF" بالسداسي عشري الرقم 255 في عشري.
معنى هذا الكود:
يمثل أول رمزين في رمز لون HTML كثافة اللون الأحمر حيث ان 00 هو الأقل و FF هو الأكثر كثافة. يمثل الثالث والرابع شدة الأخضر والخامس والسادس يمثل شدة اللون الأزرق. لذلك مع الجمع بين كثافة اللون الأحمر والأخضر والأزرق ، يمكننا مزج أي لون تقريبًا نرغب فيه ؛
أمثلة :-
باستخدام كود HTML
هذا FF0000# نطلب من المتصفح إظهار الحد الأقصى باللون الأحمر القيمه FF والاقل للون الأخضر 00 والاقل للون الأزرق. 00 والنتيجة هي بالطبع اللون الأحمر النقي
باستخدام كود HTML
هذا 00FF00# نطلب من المتصفح إظهار الحد الأقصى باللون الأخضر القيمه FF والاقل للون الأحمر 00 والاقل للون الأزرق. 00 والنتيجة هي بالطبع اللون الأخضر
باستخدام كود HTML
هذا 00FF00# نطلب من المتصفح إظهار الحد الأقصى باللون الأزرق القيمه FF والاقل للون الأحمر 00 والاقل للون الأخضر. 00 والنتيجة هي بالطبع اللون الأزرق
باستخدام كود HTML FF8C00#
هذا مزيج من اللونين الأحمر والأخضر والنتيجة هي اللون البرتقالى
ليس لديك كود Hex لا داعي للقلق ، استخدم منتقي الألوان او color picker لتصفح ملايين الألوان باستخدام أكواد ألوان Hex وأكثر من ذلك بكثير.
أسماء الألوان HTML
تلوين النص باستخدام أسماء ألوان HTML
هى طريقة أخرى لتلوين نص موقع الويب الخاص بك باستخدام اسم لون HTML مشابه ،
لطريقه اكواد الألوان Hex
ما
عليك سوى استبدال كود
Hex من الخطوة السابقة باسم اللون الذي تريد استخدامه (أحمر في مثالنا). هناك 140 لونًا مُسماة للاختيار من بينها ، وقمنا بتجميع قائمة يمكنك التحقق منها هنا. color-names
<p style="color:red;">نص باللون الاحمر </p>
قيم الألوان RGB
لون النص باستخدام قيم ألوان RGB
يعد استخدام قيم RGB أمرًا مثيرًا وسهل مثل رموز Hex أو أسماء الألوان. أدخل قيم RGB الخاصة بك داخل الداله () RGB بعد خاصية اللون. يمكنك استخدام color-picker للحصول على قيم RGB بالإضافة إلى كود Hex
<p style="color:rgb(255,0,0);">نص باللون الاحمر </p>
تحديد العتامة specify opacity
عند استخدام قيمة RGB
في موقع الويب الخاص بك ، يمكنك أيضًا تحديد العتامة
بدلاً من () RGB استخدم
( )RGBa
حيث ان
a هو ،
القناة الملونة التي تتحكم في العتامة
- وبعد أن تضيف قيم الألوان الثلاثة
الرابع للعتامة ، على مقياس من 0 - 1
( 0 للشفافية تمامًا ، 1 معتم بالكامل ) .
أمثلة للشفافية :-
<p style="color:rgba(255,0,0,1);">نص باللون الاحمر </p>
هذه هى النتيجه عتامه كامله . . لاحظ ان المعامل
a يساوى 1
نص باللون الاحمر
<p style="color:rgba(255,0,0,0.5);">نص باللون الاحمر </p>
هذه هى النتيجه نصف شفافه او باهته. . لاحظ ان المعامل a يساوى نصف 0.5
نص باللون الاحمر
ماذا . . . بعد . .
سيتم القاء الضوء على بعض انظمه الالوان الاخرى مثل HSL فى تدوينات قادمه